<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    








/*! CSS Used from: https://static12.51cto.com/edu/center/css/base.css?v=2.6.4 */
*{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Microsoft Yahei",Arial,sans-serif;margin:0;padding:0;}
ul{list-style:none;}
dl{-webkit-margin-before:0;-webkit-margin-after:0;}
h1{font-size:14px;}
a{text-decoration:none;color:#424242;}
a:hover{color:#000;}
textarea{resize:none;}
img{border:none;}
.blue{color:#00baf2;}
input,button{outline:none;font-size:14px;}
button{color:#FFF;background-color:#00baf2;line-height:30px;border:none;padding:0px 20px;cursor:pointer;}
button:hover{opacity:.9;}
img{border:none;}
body{text-align:left;}
body{color:#424242;font-size:14px;line-height:1.75;background:#FFF;min-width:1230px;}
.fl{float:left;}
.fr{float:right;}
.tc{text-align:center;}
.disp-n{display:none;}
.ml20{margin-left:20px;}
.con{padding-left:20px;}
.tc{text-align:center;}
.fl{float:left;}
.fr{float:right;}
.mask{width:100%;height:100%;position:fixed;background:url(https://s1.51cto.com/images/201611/95dc798763e7191d096823b51600438a1218c0.png);top:0px;left:0px;z-index:9999;display:none;}
.Content{padding:20px 0;}
i.icon{background:url(https://static12.51cto.com/edu/center/images/icons.png?v=1) no-repeat;}
/*! CSS Used from: https://static12.51cto.com/edu/center/css/play.css?v=1.1.1 */
body{background:#000;color:#999;min-width:1000px;}
i.icon{background:url(https://static12.51cto.com/edu/center/images/icons.png) no-repeat;}
a{color:#999;}
a:hover{color:#FFF;}
.PlayPage{min-width:1000px;position:absolute;left:0px;top:0;right:0;bottom:0;min-height:450px;overflow:hidden;}
.Top{background:#0F0F0F;height:28px;padding:16px 10px;line-height:28px;position:relative;z-index:999;}
.Top h1{max-width:50%;font-size:20px;color:#FFF;font-weight:normal;margin-right:70px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.PlayPage>.Content{position:absolute;left:0px;top:65px;bottom:0px;right:0px;padding:0;}
.Main{position:absolute;top:0px;left:0;right:386px;bottom:0;padding-bottom:65px;}
.VideoPlay{position:absolute;width:100%;left:0;top:0;bottom:64px;}
.Main .videoInfos{position:absolute;left:0;right:5px;bottom:0;height:28px;padding:16px 0px 16px 10px;border-top:1px solid #333;line-height:28px;}
.Main .videoInfos>div{line-height:26px;border:1px solid #333;position:relative;padding:0 20px;margin-right:20px;cursor:default;}
.Main .videoInfos>div:last-child{margin-right:0;}
.Main .videoInfos>div.fr{border:none;line-height:28px;}
.Main .videoInfos>div:hover span{color:#FFF;}
.Main .videoInfos>div .main{position:absolute;bottom:25px;left:0;display:none;padding-bottom:10px;line-height:1.5;}
.Main .videoInfos>div:hover .main{display:block;}
.Main .videoInfos>div .main .con{background:#FFF;padding:10px;white-space:nowrap;}
.Main .videoInfos>div .main .con img.qrcode{width:90px;height:90px;}
.Main .videoInfos>div .main p{white-space:nowrap;}
.Main .videoInfos>div .main p a:hover{color:#000;}
h1.playerLogo{width:88px;height:28px;background:url(https://static12.51cto.com/edu/center/images/logo_player.png) no-repeat center;}
.videoInfos.H5 .fr{margin-left:5px;}
.videoInfos.H5 .fl{margin-right:20px;}
.videoInfos.H5>div{border:none;padding:0;margin:0;line-height:28px;background:#000;}
.videoInfos.H5>.btns{padding:0 10px;}
.videoInfos.H5>.btns:hover{background:#00a8e9;border-radius:3px;}
.videoInfos.H5>.btns:hover span{color:#FFF;}
.feedbackError{cursor:pointer;}
.videoInfos.H5>div.download .main{left:auto;right:0;}
.videoInfos.H5>div.download .main .con{background:url(https://static12.51cto.com/edu/center/images/bg80.png);border-radius:3px;}
.videoInfos.H5>div.download .main .con a{color:#FFF;white-space:nowrap;line-height:36px;display:block;max-width:450px;overflow:hidden;text-overflow:ellipsis;}
.videoInfos.H5>div.download .main .con a:hover{color:#00a8e9;}
.videoInfos.H5>div.download .main .con p{border-top:1px solid #333;border-bottom:1px solid #000;}
.videoInfos.H5>div.download .main .con p:last-child{border-bottom:0;}
.videoInfos.H5>div.download .main .con p:first-child{border-top:0;}
.videoInfos.H5>.edu-ad{position:absolute;left:110px;top:16px;z-index:-1;}
.Tools{position:absolute;top:0px;right:0px;bottom:0;width:380px;background-color:#0F0F0F;}
.Tools dt{padding:20px 10px;line-height:20px;overflow:hidden;text-align:center;border-bottom:1px solid #222;}
.Tools dt p{float:left;width:120px;font-size:16px;cursor:pointer;}
.Tools dt p.center{margin:0 -1px;border:1px solid #222;border-top:0;border-bottom:0;}
.Tools dt p.cur,.Tools dt p:hover{color:#DDD;}
.Tools dd{position:absolute;top:61px;right:0;left:0;bottom:0;}
.lessonList{line-height:36px;height:100%;}
.lessonList li{padding:0 15px;}
.lessonList li>a{display:block;overflow:hidden;}
.lessonList li.cur a{color:#FFF;}
.lessonList .chaper,.listTitle{background:#171717;margin:10px 0;}
.lessonList .chaper:first-child{margin-top:0;}
.lessonList li span.num{width:20px;height:21px;display:block;margin-top:8px;line-height:20px;float:left;margin-right:10px;}
.lessonList li span.num{width:auto;}
.lessonList li p{max-width:225px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.noteCon,.questCon{line-height:30px;}
.sendCon{padding:15px;overflow:hidden;}
.Tools textarea{width:340px;padding:4px;border:1px solid #222;background:#000;height:70px;color:#FFF;font-size:14px;}
.Tools button{height:30px;width:80px;line-height:1;padding:0;}
.sendCon i{display:block;float:left;width:16px;height:16px;}
.sendCon i.check{background-position:0px -450px;background-color:#000;margin-top:6px;margin-right:5px;}
.RecordTime{font-size:12px;cursor:default;}
.RecordTime:hover i.check{background-position:-50px -400px;}
.playingTime{border:1px solid #222;font-size:12px;line-height:14px;margin-top:7px;margin-left:10px;padding-right:5px;background-color:#000;}
.playingTime i.icon.play{margin:-1px;background-position:-444px -97px;border-right:1px solid #222;margin-right:5px;position:static;background-color:transparent;}
.listTitle{padding:5px 15px;font-size:16px;overflow:hidden;}
.listTitle p{margin-right:20px;cursor:pointer;}
.listTitle p.fl.cur,.listTitle p.fl:hover{color:#FFF;}
.listList{padding:15px;position:absolute;left:0;right:0;bottom:0;top:200px;}
.tabsCon .mask{position:absolute;background:url(https://static12.51cto.com/edu/center/images/bg80.png);}
.tabsCon .sendLoading{width:24px;height:30px;background:url(https://static12.51cto.com/edu/center/images/loadinfo.net.gif) no-repeat center;display:none;}
.getMote{line-height:30px;background:#666;text-align:center;cursor:pointer;color:#DDD;display:none;}
.getMote:hover{background:#999;color:#FFF;}
.loadingMore{width:100%;height:40px;background:url(https://static12.51cto.com/edu/center/images/lesson_loading.gif) no-repeat center top;padding-top:40px;}
.noMore{padding:30px 0;text-align:center;color:#333;}
.success{position:absolute;top:50%;left:50%;width:200px;line-height:50px;margin-top:-25px;margin-left:-100px;border-radius:5px;background:#000;color:#FFF;z-index:50001;text-align:center;display:none;}
.tool_middle_bar{position:absolute;top:0;right:380px;width:6px;height:100%;background:#0f0f0f;cursor:pointer;}
.tool_middle_bar span{position:absolute;left:-18px;top:50%;margin-top:-25px;width:18px;height:50px;background:url(https://static12.51cto.com/edu/center/images/bars.png) no-repeat;}
#v_content.show .tool_middle_bar span{background:url(https://static12.51cto.com/edu/center/images/bar.png) no-repeat;}
#v_content.show #v_right{width:0;}
#v_content.show #v_left{right:0;}
#v_content.show #v_middle{right:0;}
.tobindnew a{color:#00baf2;}
/*! CSS Used from: https://static12.51cto.com/edu/center/css/background_stu.css?v=1.2.9 */
button{padding:10px 20px;line-height:1;}
i.icon.play{width:16px;height:16px;background-color:#00baf2;background-position:-95px -47px;position:absolute;left:0px;top:0px;}
/*! CSS Used from: https://static12.51cto.com/edu/center/css/popsign.css?v=1.1.2 */
.pop_tosignbox{position:fixed;width:346px;min-height:100px;top:20px;background:#fff;z-index:1000;border-radius:5px;color:#333;z-index:999999;display:none;}
/*! CSS Used from: https://static12.51cto.com/edu//player/h5/style.css?v=1.3.4 */
#H5Player{width:100%;height:100%;background:#000;position:relative;}
.controls{height:40px;background:rgba(0,0,0,0.3);position:absolute;left:0px;bottom:0;right:0px;z-index:10;color:#FFF;padding:10px 20px;}
.cts{position:relative;height:6px;background:rgba(0,0,0,0.2);margin-bottom:6px;}
.cts>div{position:absolute;height:100%;width:0;}
.cts>div.mem{background:rgba(0,0,0,0.6);width:0%;z-index:5;}
.cts>div.played{background:#00a8e9;width:0%;z-index:6;}
.cts>div.ps{background:red;width:1px;left:0px;top:0px;z-index:7;display:none;}
.cts:hover>div.ps{display:block;}
.cts>div.ps p{background:rgba(0,0,0,0.5);color:#FFF;line-height:24px;border-radius:3px;position:absolute;bottom:10px;left:0px;padding:0 10px;}
.controls>div.icons{width:30px;height:30px;overflow:hidden;background:url(https://static12.51cto.com/edu/player/h5/img/icons.png?v=1) no-repeat;}
.controls>div.icons:hover{background-position-y:-30px;}
.controls>div.fl{float:left;margin-right:10px;}
.controls>div.fr{float:right;margin-left:20px;z-index:10;}
.controls>div.play{background-position-x:-180px;}
.pause .controls>div.play{background-position-x:-90px;}
.controls>div.prev{background-position-x:-0px;}
.controls>div.next{background-position-x:-60px;}
.controls>div.full{background-position-x:-120px;}
.controls>div.voice{background-position-x:-30px;position:relative;overflow:visible;}
.voice .sv{position:absolute;bottom:30px;background:rgba(0,0,0,0.8);width:22px;left:4px;height:0px;border-radius:3px;overflow:hidden;}
.voice .sv .c{position:absolute;top:10px;bottom:10px;width:100%;}
.voice .sv .b{width:2px;margin:auto;height:100%;background:#DDD;}
.voice .sv .a{position:absolute;left:50%;margin-left:-4px;width:8px;z-index:5;background:url(https://static12.51cto.com/edu/player/h5/img/v_bg.png) no-repeat center top;min-height:4px;bottom:0px;height:100px;}
.controls>div.time{line-height:30px;margin-left:20px;font-size:16px;}
.controls>div.time .allTime{color:#DDD;}
.controls>div.hl{position:relative;padding:7px 0;margin-top:-5px;text-align:center;}
.controls>div.hl>span{display:block;line-height:26px;padding:0 20px 0 10px;color:#FFF;background:rgba(0,0,0,0.8) url(https://static12.51cto.com/edu/player/h5/img/l_more.png) no-repeat 90% center;border-radius:3px;cursor:pointer;}
.controls>div.hl>ul{position:absolute;bottom:20px;background:rgba(0,0,0,0.8);padding:0 10px;left:-20px;right:-20px;border-radius:3px;line-height:35px;height:0;overflow:hidden;transition:all 0.3s;}
.controls>div.hl>ul li{border-top:1px solid #333;border-bottom:1px solid #000;}
.controls>div.hl>ul li:last-child{border-bottom:0;}
.controls>div.hl>ul li:first-child{border-top:0;}
.controls>div.hl>ul li:hover{cursor:pointer;color:#00a8e9;}
.controls>div.hl:hover>span{background-color:#00a8e9;background-image:url(https://static12.51cto.com/edu/player/h5/img/l_less.png?v=1);}
#H5Player .bufferLoading{position:absolute;top:0;left:0;width:50%;height:50%;background:url(https://static12.51cto.com/edu/player/h5/img/bufferLoading.gif) no-repeat 100% 100%;z-index:12;display:none;}
#H5Player .Tips{background:url(https://static12.51cto.com/edu/player/h5/img/bg50.png);padding:10px;overflow:hidden;color:#FFF;line-height:20px;position:absolute;left:0;right:0;bottom:60px;animation-name:Tips;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running;}
#H5Player div.error{text-align:center;position:absolute;top:0;width:100%;left:0;height:100%;color:#999;font-size:16px;}
.pasue{display:none;}
.pasue button{display:block;width:50px;height:50px;border:none;margin:auto;background:url(https://static12.51cto.com/edu/player/h5/img/play.png) no-repeat;background-size:50px 50px;position:absolute;left:10px;bottom:70px;}
.pasue button:hover{opacity:0.8;}
.Main .videoInfos>div .main{z-index:10;}
.noMouse .pasue button{bottom:10px;}
#H5Player.noMouse .Tips{bottom:0;}
.blue{color:#00baf2;}
/*! CSS Used keyframes */
@keyframes Tips{0%{height:0;}100%{height:20px;}}


    </style>


    <script src="../js/jquery-1.7.2.min.js"></script>

    <script>
    

    
    $(document).ready(function(){

        $('#v_middle').click(function(){
            var vc = $('#v_content').toggleClass('show')
        });



    });

    function videoEnd() {
        alert('播放完毕'); 
        // 跳转到下一节课，自动播放
    }


    
    </script>

</head>

<body>

    <div class="PlayPage">
        <input type="hidden" id="cID" value="">
        <div class="Top">
            <a href="https://edu.51cto.com/course/9041.html" class="fl">&lt;返回</a>
            <h1 class="fl ml20">Storm Topo开发二</h1>

            <div class="fr edu-ad txt_ad" ad_id="10" info_id="9041" type="course"><a
                    href="https://edu.51cto.com/px/train/243?lesson" target="_blank"
                    style="font-size:18px; color:#ffff00; font-weight:bold;"
                    title="企业级【大数据】实战课程，找回那些年你错过的高薪职位！">大数据！</a></div>
        </div>
        <div class="Content" id="v_content">
            <div class="Main" id="v_left">

                <div class="VideoPlay">

                        <video autoplay="autoplay"  style="width:100%; height: 100%;  "  onended="videoEnd()" name="media" controls="true" controlslist="nodownload">
                            <source src="file:///D:/data/water/p.mp4" type="video/mp4">
                            您的浏览器不支持播放，请换一个浏览器尝试一下。
                            </video>

                   


                   
                </div>

                <div class="videoInfos H5">
                        <h1 class="playerLogo fl">&nbsp;</h1>
                   
                    <div class="fr btns download">
                        <span>资料下载</span>
                        <div class="main">
                            <div class="con">
                                <p><a href="/center/file/download/index?fid=UlEJXFw6RBtsDQIFUg" target="_blank"
                                        title="41、Topo开发二">41、Topo开发二</a></p>
                            </div>
                        </div>
                    </div>
                   
                    
                   
                </div>

            </div>
            
            <div class="tool_middle_bar" id="v_middle">
                <span></span>
            </div>
            <div class="Tools" id="v_right">
                <dl class="">
                    
                    <dd class="tabsCon">
                        <div class="lessonList cc" tabindex="1" style="overflow: hidden; outline: none;">
                            <ul>
                                <li class="chaper">第一章 Storm基础</li>

                                <li class="lesson ">
                                    <a href="/center/course/lesson/index?id=163789"
                                        title="课程介绍，Storm简介及背景和现状，和JStorm对比"><span class="num fl">1-1</span>
                                        <p class="fl">课程介绍，Storm简介及背景和现状，和JStorm对比</p><span class="time fr">18:46</span>
                                    </a>
                                </li>

                                <li class="lesson ">
                                    <a href="/center/course/lesson/index?id=163791" title="Storm架构原理详解"><span
                                            class="num fl">1-2</span>
                                        <p class="fl">Storm架构原理详解</p><span class="time fr">21:24</span>
                                    </a>
                                </li>

                                <li class="lesson cur">
                                    <a href="/center/course/lesson/index?id=164861" title="Storm Topo开发二"><span
                                            class="num fl">3-9</span>
                                        <p class="fl">Storm Topo开发二</p><span class="time fr">26:17</span>
                                    </a>
                                </li>

                                <li class="lesson ">
                                    <a href="/center/course/lesson/index?id=164862"
                                        title="Storm Topo开发三，增加启动Topo进行初始化数据的机制"><span class="num fl">3-10</span>
                                        <p class="fl">Storm Topo开发三，增加启动Topo进行初始化数据的机制</p><span
                                            class="time fr">23:08</span>
                                    </a>
                                </li>

                                <li class="lesson ">
                                    <a href="/center/course/lesson/index?id=164863" title="Web端开发一"><span
                                            class="num fl">3-11</span>
                                        <p class="fl">Web端开发一</p><span class="time fr">14:46</span>
                                    </a>
                                </li>

                                <li class="lesson ">
                                    <a href="/center/course/lesson/index?id=164864" title="Web端开发二，项目运行"><span
                                            class="num fl">3-12</span>
                                        <p class="fl">Web端开发二，项目运行</p><span class="time fr">06:16</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                       
                       
                       
                        <div class="success" id="sending">Loading...</div>
                        <div id="ascrail2000" class="nicescroll-rails nicescroll-rails-vr"
                            style="width: 8px; z-index: auto; cursor: default; position: absolute; top: 0px; left: 372px; height: 324px; opacity: 0; display: block;">
                            <div class="nicescroll-cursors"
                                style="position: relative; top: 0px; float: right; width: 6px; height: 362px; background-color: rgb(66, 66, 66); border: 1px solid rgb(255, 255, 255); background-clip: padding-box; border-radius: 5px;">
                            </div>
                        </div>
                        <div id="ascrail2000-hr" class="nicescroll-rails nicescroll-rails-hr"
                            style="height: 8px; z-index: auto; top: 316px; left: 0px; position: absolute; cursor: default; opacity: 0; display: none; width: 372px;">
                            <div class="nicescroll-cursors"
                                style="position: absolute; top: 0px; height: 6px; width: 380px; background-color: rgb(66, 66, 66); border: 1px solid rgb(255, 255, 255); background-clip: padding-box; border-radius: 5px; left: 0px;">
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>



</body>

</html>